import type { GreasyForkElements } from '../../../../../../../../../types/constants/personalization/greasy_fork'
import {
  PAGE_ELEMENTS,
  PROJECT_PREFIX,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../../types/constants'
import { getElementSelector } from '../../../../../../../../../types/constants/personalization/common'

export class VersionsPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private readonly containerSelector = getElementSelector(this.elements, 'COMMON_CONTAINER')
  private static instance: VersionsPage

  /**
   * 获取单例实例
   */
  public static getInstance(): VersionsPage {
    if (!VersionsPage.instance) {
      VersionsPage.instance = new VersionsPage()
    }
    return VersionsPage.instance
  }

  init(): void {
  }

  getMainStyles(): string {
    if (this.containerSelector.length === 0)
      return ''

    return `
${this.containerSelector} {
  .history_versions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    
    > li {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) 3fr !important;
      
      .diff-controls {
        input[type=radio]:checked::before {
          background-color: var(--${PROJECT_PREFIX}-theme-primary) !important;
        }
      }
    }
  }
}
`
  }
}
